<template>
  <div id="container"></div>
  <!-- <div class=""></div> -->
</template>

<script>
import G6 from "@antv/g6";
export default {
  data() {
    return {
      flowData: {
        id: "顶部",
        children: [
          {
            id: "菜单1",
            children: [
              {
                id: "菜单1.1rwrwrrr\nrrrrrrrrrrrr\nrrrrrrrrrrrrrrr\nrrrrrr",
              },
              {
                id: "菜单1.2wwrw\nrwrwr",
              },
            ],
          },
          {
            id: "菜单2",
            children: [
              {
                id: "菜单2.1",
                children: [
                  {
                    id: "菜单2.1.1",
                  },
                  {
                    id: "菜单2.1.2",
                  },
                ],
              },
              {
                id: "菜单3",
                children: [
                  {
                    id: "菜单3.1",
                  },
                  {
                    id: "菜单3.2",
                  },
                ],
              },
              //   {
              //     id: "菜单4",
              //     children: [
              //       {
              //         id: "菜单4.1",
              //       },
              //       {
              //         id: "菜单4.2",
              //       },
              //       {
              //         id: "菜单4.3",
              //       },
              //       {
              //         id: "菜单4.34",
              //       },
              //       {
              //         id: "菜单4.5",
              //       },
              //       {
              //         id: "菜单4.6",
              //       },
              //       {
              //         id: `30°C 60%RH 192hrs`,
              //       },
              //     ],
              //   },
            ],
          },
        ],
      },
    };
  },

  mounted() {
    this.getFlow();
  },
  methods: {
    getFlow() {
      const container = document.getElementById("container");
      const width = container.scrollWidth;

      const height = container.scrollHeight || 600;
      // todo 设置鼠标悬停显示详情操作
      const tooltip = new G6.Tooltip({
        offsetX: 30,
        offsetY: 20,
        getContent(e) {
          const outDiv = document.createElement("div");
          // outDiv.style.width = "auto";
          outDiv.style.color = "aqua";
          outDiv.innerHTML = `
            <div >
                <p style="padding: 2px 8px;position: relative;z-index:12">${
                  e.item.getModel().label || e.item.getModel().id
                }</p>
            </div>`;
          return outDiv;
        },
        itemTypes: ["node"],
      });
      //注册自定义连接线
      G6.registerEdge("bt-tree", {
        draw(cfg, group) {
            const {startPoint,endPoint} = cfg;
            const path = [
                ['M',startPoint.x,startPoint.y],//起点
                ['L',endPoint.x,endPoint.y]//终点
            ]
            console.log(cfg,"222");
            //添加元素
            const shape = group.addShape('path',{
                attrs : {
                    path,//路径
                    stroke : '#1890ff',
                    ...cfg,//样式
                    name : 'bt-tree-edge'
                }
            })
            return shape;
        },
      });


        // 实例化图形
      const graph = new G6.TreeGraph({
        container: "container",
        width,
        height,
        linkCenter: true,
        plugins: [tooltip], //插件
        // 模式
        modes: {
          default: [
            {
              type: "collapse-expand",
              onChange: function onChange(item, collapsed) {
                const data = item.get("model");
                data.collapsed = collapsed;
                return true;
              },
            },
            "drag-canvas",
            "zoom-canvas",
          ],
        },
        //节点默认设置
        defaultNode: {
          // size: [30, 20],
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
          type: "rect",
          labelCfg: {
            style: {
              fill: "#f36c21", //文字颜色
              fontSize: 12, // 文字大小
              cursor: "pointer",
            },
          },
          style: {
            width: 100,
            height: 38,
            radius: 4,
            fill: "#ecf6fc",
            stroke: "#1890ff",
          },
        },
        //线默认样式
        // defaultEdge: {
        //   type: "cubic-vertical",
        //   style: {
        //     lineWidth: 2, // 线宽
        //     stroke: "rgb(0, 255, 187)", // 线的颜色
        //     endArrow: true,
        //     //箭头配置
        //     endArrow: {
        //       path:  G6.Arrow.triangle(8, 5, 15),
        //       // path: G6.Arrow.triangle(8, 5, 18),
        //       d: 15,
        //       fill: "#ccc",
        //       stroke: "#0f0",
        //       opacity: 0.5,
        //       lineWidth: 1,
        //     },
        //   },
        // },
        defaultEdge: {
          type: "bt-tree", //注册的线事件名
        },

        layout: {
          type: "dendrogram",
          //   type: "mindmap",//流程图
          direction: "TB", // H / V / LR / RL / TB / BT
          preventOverlap: true, // 防止节点重叠
          nodeSep: 150,
          rankSep: 120,
          //   getHGap :()=>150,
          //   getVGap:()=>120
        },
        //节点状态样式
        nodeStateStyles: {
          // 各状态下的样式，平铺的配置项仅在 keyShape 上生效。需要在其他 shape 样式上响应状态变化则写法不同，参见上文提到的 配置状态样式 链接
          hover: {
            fillOpacity: 0.1,
            lineWidth: 2,
            fill: "#d3adf7",
          },
        },
        maxZoom: 1, //最大缩放比例
      });
      // 节点配置
      graph.node(function (node) {
        // console.log(node, "666");
        let position = "center";
        let rotate = 0;

        if (!node.children) {
          // position = "left";
          //   rotate = Math.PI / 2;//没有子节点旋转角度
          return {
            label: node.id,
            labelCfg: {
              position,
              // offset: 5,
              style: {
                rotate,
                textAlign: "center",
                fill: "#666",
                fontSize: 10,
              },
            },
          };
        }
        return {
          label: node.id,
          labelCfg: {
            position,
            // offset: 5,
            style: {
              rotate,
              textAlign: "center",
            },
          },
        };
      });

      graph.data(this.flowData);
      graph.render();
      graph.fitView();

      graph.on("node:mouseenter", (evt) => {
        const node = evt.item;
        // 激活该节点的 hover 状态
        graph.setItemState(node, "hover", true);
      });
      // 监听鼠标离开节点事件
      graph.on("node:mouseleave", (evt) => {
        const node = evt.item;
        // 关闭该节点的 hover 状态
        graph.setItemState(node, "hover", false);
      });

      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
  },
};
</script>

<style scoped>
#container >>> .g6-component-tooltip {
  padding: 0 !important;
}
</style>